<template>
  <div class="user page">
    <template v-if="isLogin">
      <el-card class="user_item" :body-style="{ paddingTop: '10px' }" shadow="hover">
        <div class="user_item_head">
          <h4 class="user_item_title">
            <el-avatar shape="square" :src="makeUserPhoto(user.name)"></el-avatar>
            <span>{{ user.name }}</span>
            <span class="user_item_eamil">邮箱/账号：{{ user.email }}</span>
          </h4>
          <div class="item_operation">
            <el-button class="btn" size="mini" @click="useEdit">编辑信息</el-button>
            <el-button class="btn" size="mini" @click="useLogout">退出登录</el-button>
          </div>
        </div>
      </el-card>

      <el-table :data="tableData" stripe>
        <el-table-column prop="article" label="我的发布">
        </el-table-column>
        <el-table-column prop="content" label="类别">
        </el-table-column>
        <el-table-column prop="created_at" label="时间">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini">查看</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-empty v-else description="没有您的用户信息">
      <el-link type="primary" @click="$bus.emit('showLogin')">快速登录</el-link>
    </el-empty>

    <el-dialog title="编辑信息" :visible.sync="dialogVisible">
      <el-form :model="editForm">
        <el-form-item label="昵称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Identicon from 'identicon.js' // 类github 头像
import md5 from 'md5'
export default {
  name: 'User',
  components: {},
  data() {
    return {
      isLogin: true,
      page: 1,
      count: 0,
      commentList: [],
      user: {
        userId: '',
        name: '',
        email: '',
      },
      screenWidth: document.body.clientWidth,
      tableData: [],
      dialogVisible: false,
      editForm:{
        name:'',
        password: '123456'
      }
    }
  },
  watch: {
    '$store.state.user': {
      handler(value) {
        if (value.userId) {
          this.getUserInfo()
        } 
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$bus.on('isLogin', () => this.isLogin = true)
    this.getUserInfo()
  },
  methods: {
    // 编辑
    useEdit() {
      this.editForm.name = this.user.name
      this.editForm.password = this.user.password
      this.dialogVisible = true

    },
    // 注销
    useLogout() {
      this.$confirm('是否退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$storage.removeSession('token')
          this.$store.commit('logout')
          this.isLogin = false
        })
        .catch(() => { })
    },
    // 用户头像
    makeUserPhoto(name) {
      const code = md5(name)
      const data = new Identicon(code, 420).toString()
      return 'data:image/png;base64,' + data
    },
    // 获取登录信息
    getUserInfo() {
      const { userId } = this.$store.state.user
      if (userId) {
        this.isLogin = true
        this.$bus.emit('closeLogin')
        this.user = this.$store.state.user
      } else {
        this.isLogin = false
        // 如果是手机环境，则不弹出
        if (this.screenWidth >= 1200) {
          this.$bus.emit('showLogin')
        }
      }

    },
  },
}
</script>

<style scoped lang="scss">
.page {
  width: 1200px;
  margin: auto;
}

.user_item {
  margin: 20px 0;

  &_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &_title {
    margin-bottom: 20px;
    color: $light-black;

    .el-avatar {
      position: relative;
      top: 10px;
      margin-right: 10px;
    }

    .user_item_eamil {
      font-size: 14px;
      color: $light-gray;
      font-weight: 100;
      margin-left: 20px;
    }
  }

  .btn {
    position: relative;
    top: 10px;
  }

  &_content {
    background-color: $light-white;
    border-radius: 4px;
    padding: 5px 15px;
    font-size: 14px;
    line-height: 1.5;
  }
}

.userinfo {
  width: 1024px;
  margin: 32px auto;
  font-size: 14px;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid $light-white;
}

@media screen and (max-width: 1200px) {
  .page {
    width: 100%;
  }

  .user_item_head {
    flex-flow: wrap;
  }
}
</style>
